<template>
    <div class="add">


        <el-form width="200" ref="ruleFormRef" :model="list" :rules="rules" label-width="120px" class="demo-ruleForm"
            :size="formSize" status-icon>

            <el-form-item label="广告名称:" prop="name">
                <el-col :span="22">
                    <el-input v-model="list.name" />
                </el-col>
            </el-form-item>
            <el-form-item label="广告位置:" prop="type">
                <el-select v-model="list.type">
                    <el-option label="PC首页轮播" :value="0" />
                    <el-option label="APP首页轮播" :value="1" />
                </el-select>
            </el-form-item>
            <el-form-item label="开始时间：" prop="startTime" label-width="120px">
                <el-date-picker v-model="list.startTime" type="date" label="Pick a time" placeholder="选择日期"
                    style="width: 100%" />
            </el-form-item>
            <el-form-item label="到期时间：" prop="endTime" label-width="120px">
                <el-date-picker v-model="list.endTime" label="Pick a time" placeholder="选择日期" />
            </el-form-item>
            <el-form-item label="上线/下线：" prop="status">
                <el-radio-group class="ml-4" v-model="list.status">
                    <el-radio :label="0" size="large">下线</el-radio>
                    <el-radio :label="1" size="large">上线</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="广告图片：">
                <el-upload list-type="picture" action="http://120.24.64.5:8088/mall-admin/minio/upload"
                    :on-success="handleAvatarSuccess" show-file-list class="upload-demo" multiple :limit="3">
                    <el-button type="primary">点击上传</el-button>
                </el-upload>
            </el-form-item>
            <el-form-item label="排序：" prop="sort">
                <el-col :span="22">
                    <el-input v-model="list.sort" />
                </el-col>
            </el-form-item>
            <el-form-item label="广告链接：" prop="url">
                <el-col :span="22">
                    <el-input v-model="list.url" />
                </el-col>
            </el-form-item>
            <el-form-item label="广告备注：" prop="note">
                <el-col :span="22">
                    <el-input v-model="list.note" type="textarea" />
                </el-col>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>
                <el-button @click="resetForm(ruleFormRef)">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
  
<script lang="ts" setup>
import { reactive, ref, toRefs } from 'vue'
import { ElMessage, ElMessageBox, FormInstance, FormRules } from 'element-plus'
import { user } from '@/api';
import { useRoute } from 'vue-router';
const route = useRoute()

const formSize = ref('default')
const ruleFormRef = ref<FormInstance>()

const state = reactive<{ list: homeAdvertiseModel }>({
    list: {
        clickCount: 0,
        endTime: "",
        id: 0,
        name: "",
        note: "",
        orderCount: 0,
        pic: "",
        sort: 0,
        startTime: "",
        status: 0,
        type: 1,
        url: "",
    }
})

const rules = reactive<FormRules>({
    name: [
        { required: true, message: '广告名不能为空', trigger: 'blur' },
    ],
    startTime: [
        {
            type: 'date',
            required: true,
            message: '请选择开始的日期',
            trigger: 'change',
        },
    ],
    endTime: [
        {
            type: 'date',
            required: true,
            message: '请选择结束的日期',
            trigger: 'change',
        },
    ],
    url: [
        {

            required: true,
            message: '广告链接不能为空',
            trigger: 'blur',
        },
    ]
})
const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            ElMessageBox.confirm(
                '确定要修改吗？',
                '提示',
                {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }
            ).then(() => {
                user.homeAdvertiseCreate(state.list).then(res => {
                    if (res.code == 200) {
                        state.list.pic = ""
                        resetForm(ruleFormRef.value)
                        ElMessage({
                            message: res.message,
                            type: res.code === 200 ? "success" : "error",
                        });
                    }
                })
            }).catch(() => {
                ElMessage({
                    message: "修改失败",
                    type: "info",
                });
            })


        } else {
            console.log('error submit!', fields)
        }
    })
}
interface uploadFile {
    uploadFile: {
        response: {
            data: {
                url: string
            }
        }
    }
}
const handleAvatarSuccess = (
    response: any,
    uploadFile: {
        [x: string]: any; uploadFile: uploadFile
    }
) => {
    console.log(uploadFile);

    state.list.pic = uploadFile.response.data.url
    console.log(state.list.pic);

}

if (route.query.id) {
    user.homeadvertise(Number(route.query.id)).then(res => {
        state.list = res.data
    })
}





const { list } = toRefs(state)
</script>

<style>
.add {
    width: 40%;
    border: 1px solid #c0c4d1;
    margin: 0 auto;
    padding: 20px;
    /* display: flex;
    justify-content: center; */
    padding: 50px 100px;
}
</style>
  